<template>
  <div class="bg">
    <!-- 背包 商店 用 v-if选择渲染 通过prop传入性质 -->
    <div v-if="type == 'backpack'" class="backpack container" style="color: white">
      <div class="close-btn" @click="selfDestory"></div>
      <div class="title">背包</div>
      <!-- <van-button type="primary">主要按钮</van-button> -->
      <div class="item-list">
        <div class="item" v-for="item in validInventory" :key="item.id">
          <!-- 图标 -->
          <img :src="require('@/assets/items/icon_' + item.id + '.png')" alt="" class="icon" />
          <!-- 数量 -->
          <div class="count">{{ item.count }}</div>
          <!-- 物品名称 -->
          <div class="name" :style="{ backgroundColor: getColorByLevel(itemInfo[item.id].grade) }">{{ itemInfo[item.id].name }}</div>
          <!-- 物品售价 -->
          <div class="price">售价: {{ itemInfo[item.id].price * 0.5 }}</div>
          <!-- 操作按钮 -->
          <!-- 根据物品类型, 开放对应的操作 -->
          <div class="button-container">
            <!-- 交易按钮 -->
            <img :src="require('@/assets/button_trade.png')" alt="" class="button" @click="$emit('sellItem', item.id)" />
            <!-- 信息按钮 -->
            <img :src="require('@/assets/button_info.png')" alt="" class="button" @click="$emit('info', item.id)" />
            <!-- 使用按钮 -->
            <!-- 对于那些只能出售不能使用的物品隐藏 -->
            <img :src="require('@/assets/button_use.png')" v-if="itemInfo[item.id].usable" alt="" class="button" @click="$emit('useItem', item.id)" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="type == 'store'" class="store container" style="color: white">
      <div class="close-btn" @click="selfDestory"></div>
      <div class="title">商店</div>
      <div class="item-list">
        <div class="item" v-for="item in purchasableItem" :key="item.id">
          <!-- 图标 -->
          <img :src="require('@/assets/items/icon_' + item.id + '.png')" alt="" class="icon" />
          <!-- 物品名称 -->
          <!-- 根据物品等级, 显示不同的颜色 -->
          <div class="name" :style="{ backgroundColor: getColorByLevel(item.grade) }">{{ item.name }}</div>
          <!-- 物品售价 -->
          <div class="price">价格: {{ item.price }}</div>
          <!-- 操作按钮 -->
          <!-- 根据物品类型, 开放对应的操作 -->
          <div class="button-container">
            <!-- 交易按钮 -->
            <img :src="require('@/assets/button_trade.png')" alt="" class="button" @click="$emit('buyItem', item.id)" />
            <!-- 信息按钮 -->
            <img :src="require('@/assets/button_info.png')" alt="" class="button" @click="$emit('info', item.id)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  name: 'MenuComponent',
  data() {
    return {
      myNumber: 0
    }
  },
  // 菜单类型, 当前库存, 物品信息
  props: ['type', 'inventory', 'itemInfo'],
  // 计算属性
  computed: {
    // 过滤出count大于0的item
    validInventory() {
      return Object.keys(this.inventory)
        .map((key) => this.inventory[key])
        .filter((item) => item.count > 0)
    },
    // 过滤出可以购买的item
    purchasableItem() {
      return Object.keys(this.itemInfo)
        .map((key) => this.itemInfo[key])
        .filter((item) => item.purchasable)
    }
  },
  components: {
    [Button.name]: Button
  },
  methods: {
    // 关闭菜单
    selfDestory() {
      // console.log(`销毁${this.type}组件`)
      document.body.removeChild(this.$el)
      this.$destroy()
    },
    // 根据等级返回不同的颜色
    getColorByLevel(level) {
      switch (level) {
        case 1:
          return '#52c41a'
        case 2:
          return '#1890ff'
        case 3:
          return '#722ed1'
        case 4:
          return '#fa8c16'
        case 5:
          return '#f5222d'
        default:
          return 'white'
      }
    }
  },
  created() {}
}
</script>

<style scoped>
.bg {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/* 菜单容器 通用 */
.container {
  width: 80%;
  height: 60%;
  margin: 35% auto;
  background-color: #d8964a;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 15px;
  border: 5px solid lightyellow;
}

.container .close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background: url('@/assets/button_close.png') center center no-repeat;
  background-size: 100% 100%;
}

.container .title {
  width: 160px;
  height: 60px;
  background-color: #d8964a;
  border: 5px solid lightyellow;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  position: absolute;
  left: 10px;
  top: -64px;
  line-height: 60px;
  color: white;
  text-align: center;
  font-size: 40px;
}

.container .item-list {
  width: 90%;
  height: 90%;
  margin: 10% auto;
  /* border: 1px solid white; */
  overflow: scroll;
}

.item-list .item {
  width: 95%;
  height: 100px;
  border-bottom: 2px solid lightyellow;
  /* border-radius: 10px; */
  margin-top: 10px;
  margin-bottom: 10px;
  /* box-sizing: border-box; */
  position: relative;
}

.item .icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 10px solid lightyellow;
  background-color: lightyellow;
  position: absolute;
  top: 10px;
  left: 10px;
  box-sizing: border-box;
}

.item .name {
  position: absolute;
  top: 10px;
  left: 120px;
  font-size: 26px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 15px;
  padding: 0 10px;
  color: lightyellow;
  background-color: green;
}

.item .price {
  position: absolute;
  top: 50px;
  left: 120px;
  font-size: 26px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: lightyellow;
}

.item .count {
  position: absolute;
  top: 10px;
  left: 65px;
  font-size: 20px;
  height: 30px;
  min-width: 30px;
  line-height: 30px;
  text-align: center;
  color: black;
  border-radius: 50%;
  background-color: lightyellow;
}

.item .button-container {
  /* border: 1px solid black; */
  height: 100%;
  min-width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  flex-direction: row-reverse;
}

.item .button-container .button {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid lightyellow;
  /* 上下居中 */
  margin: auto 15px;
}

/* TODO: 通过不同的按钮区分背包和商店: 使用/购买/出售... 种子可以使用可以出售  作物只能出售 */

/* 背包 */
.backpack {
}
/* 商店 */
.store {
}

/* 覆盖样式 */
/* 覆盖vant按钮的默认样式 */
::v-deep .van-button--primary {
  height: 1rem;
  width: 2rem;
  padding: 0px 20px;
  border-radius: 25px;
}
</style>
